<template>
  <div class="container">
    <div class="m-b-20">
      <el-select v-model="statType" placeholder="请选择统计方式" style="width: 200px">
        <el-option label="均价" value="avg" />
        <el-option label="最高价" value="max" />
        <el-option label="最低价" value="min" />
      </el-select>
    </div>
    <div ref="chart" class="chart"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  data() {
    return {
      statType: 'avg',
      typeList: ['蔬菜', '水果', '粮食', '油料'],
      mockData: {
        avg: [
          { type: '蔬菜', value: 3.5 },
          { type: '水果', value: 5.2 },
          { type: '粮食', value: 2.8 },
          { type: '油料', value: 4.1 }
        ],
        max: [
          { type: '蔬菜', value: 6.0 },
          { type: '水果', value: 8.2 },
          { type: '粮食', value: 4.5 },
          { type: '油料', value: 7.0 }
        ],
        min: [
          { type: '蔬菜', value: 1.2 },
          { type: '水果', value: 2.1 },
          { type: '粮食', value: 1.0 },
          { type: '油料', value: 2.5 }
        ]
      }
    }
  },
  watch: {
    statType: 'drawChart'
  },
  mounted() {
    this.drawChart()
  },
  methods: {
    drawChart() {
      const chart = echarts.init(this.$refs.chart)
      const data = this.mockData[this.statType]
      const option = {
        title: {
          text: '不同类型农产品价格统计',
          left: 'center',
          textStyle: { fontSize: 30 }
        },
        tooltip: { trigger: 'axis' },
        xAxis: { type: 'category', data: data.map(d => d.type) },
        yAxis: { type: 'value', name: '价格(元)' },
        series: [
          {
            name: '价格',
            type: 'bar',
            data: data.map(d => d.value),
            itemStyle: { color: '#4fc3f7' }
          }
        ]
      }
      chart.setOption(option)
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 100%;
}

.chart {
  width: 100%;
  height: 100%;
  min-height: 300px; /* 设置最小高度，避免图表内容过少时显示不全 */
}
</style>
